<template>
  <a-drawer
    :label-col="4"
    :visible="open"
    :wrapper-col="14"
    width="35%"
    @close="cancel">
    <template slot="title">
      <b>{{ formTitle }}</b>
    </template>

    <div class="my-ant-drawer-content">
      <a-form-model ref="form" :model="form" :rules="rules">
        <!-- 城市概况 -->
        <a-form-model-item label="城市名称" prop="cityName">
          <a-input v-model="form.cityName" allow-clear placeholder="请输入城市名称" />
        </a-form-model-item>

        <a-form-model-item label="城市级别" prop="cityLevel">
          <a-select v-model="form.cityLevel" placeholder="请选择城市级别" style="width: 100%">
            <a-select-option v-for="(d, index) in cityLevelOptions" :key="index" :value="d.dictValue">
              {{ d.dictLabel }}
            </a-select-option>
          </a-select>
        </a-form-model-item>

        <a-form-model-item label="城市线级" prop="linesLevel">
          <a-select v-model="form.linesLevel" placeholder="请选择城市线级" style="width: 100%">
            <a-select-option v-for="(d, index) in linesLevelOptions" :key="index" :value="d.dictValue">
              {{ d.dictLabel }}
            </a-select-option>
          </a-select>
        </a-form-model-item>

        <a-form-model-item label="常住人口总数" prop="totalResidentPopulation">
          <a-input
            v-model="form.totalResidentPopulation"
            addon-after="万人"
            placeholder="请输入常住人口总数"
            type="number" />
        </a-form-model-item>

        <a-form-model-item label="常住人口排名" prop="totalResidentPopulationRanking">
          <a-input
            v-model="form.totalResidentPopulationRanking"
            addon-before="第"
            addon-after="名"
            placeholder="请输入常住人口排名"
            type="number" />
        </a-form-model-item>

        <a-form-model-item label="新增人口总数" prop="newResidentPopulation">
          <a-input v-model="form.newResidentPopulation" addon-after="万人" placeholder="请输入新增人口总数" type="number" />
        </a-form-model-item>

        <a-form-model-item label="户籍人口总数" prop="totalRegisteredPopulation">
          <a-input
            v-model="form.totalRegisteredPopulation"
            addon-after="万人"
            placeholder="请输入户籍人口总数"
            type="number" />
        </a-form-model-item>

        <a-form-model-item label="户籍人口排名" prop="totalRegisteredPopulationRanking">
          <a-input
            v-model="form.totalRegisteredPopulationRanking"
            addon-before="第"
            addon-after="名"
            placeholder="请输入户籍人口排名"
            type="number" />
        </a-form-model-item>

        <a-form-model-item label="家庭户数" prop="familyNumber">
          <a-input v-model="form.familyNumber" addon-after="万户" placeholder="请输入家庭户数" type="number" />
        </a-form-model-item>

        <a-form-model-item label="城市面积" prop="cityArea">
          <a-input v-model="form.cityArea" addon-after="km²" placeholder="请输入城市面积" type="number" />
        </a-form-model-item>

        <a-form-model-item label="城市面积排名" prop="cityAreaRanking">
          <a-input
            v-model="form.cityAreaRanking"
            addon-before="第"
            addon-after="名"
            placeholder="请输入城市面积排名"
            type="number" />
        </a-form-model-item>

        <!-- 经济数据 -->
        <a-form-model-item label="城市GDP" prop="cityGdp">
          <a-input
            v-model="form.cityGdp"
            placeholder="请输入城市GDP"
            addon-after="万元" />
        </a-form-model-item>

        <a-form-model-item label="城市GDP增速" prop="cityGdpRate">
          <a-input
            v-model="form.cityGdpRate"
            placeholder="请输入城市GDP增速"
            addon-after="%" />
        </a-form-model-item>

        <a-form-model-item label="GDP全国排名" prop="cityGdpRanking" :span="12">
          <a-input
            v-model="form.cityGdpRanking"
            placeholder="请输入GDP全国排名"
            addon-before="第"
            addon-after="名" />
        </a-form-model-item>

        <a-form-model-item label="人均GDP" prop="peopleAreGdp">
          <a-input
            v-model="form.peopleAreGdp"
            placeholder="请输入人均GDP"
            addon-after="元" />
        </a-form-model-item>

        <a-form-model-item label="人均GDP排名" prop="peopleAreGdpRanking">
          <a-input
            v-model="form.peopleAreGdpRanking"
            placeholder="请输入人均GDP排名"
            addon-before="第"
            addon-after="名" />
        </a-form-model-item>

        <a-form-model-item label="人均消费支出" prop="peopleAreConsumer">
          <a-input
            v-model="form.peopleAreConsumer"
            placeholder="请输入人均消费支出"
            addon-after="元" />
        </a-form-model-item>

        <a-form-model-item label="人均消费支出排名" prop="peopleAreConsumerRanking">
          <a-input
            v-model="form.peopleAreConsumerRanking"
            placeholder="请输入人均消费支出排名"
            addon-before="第"
            addon-after="名" />
        </a-form-model-item>

        <a-form-model-item label="人均可支配收入" prop="peopleAreDominant">
          <a-input
            v-model="form.peopleAreDominant"
            placeholder="请输入人均可支配收入"
            addon-after="元" />
        </a-form-model-item>

        <a-form-model-item label="人均可支配收入排名" prop="peopleAreDominantRanking">
          <a-input
            v-model="form.peopleAreDominantRanking"
            placeholder="请输入人均可支配收入排名"
            addon-before="第"
            addon-after="名" />
        </a-form-model-item>

        <a-form-model-item label="人均月薪资" prop="peopleAreWage">
          <a-input
            v-model="form.peopleAreWage"
            placeholder="请输入人均月薪资"
            addon-after="元" />
        </a-form-model-item>

        <a-form-model-item label="人均月薪资排名" prop="peopleAreWageRanking">
          <a-input
            v-model="form.peopleAreWageRanking"
            placeholder="请输入人均月薪资排名"
            addon-before="第"
            addon-after="名" />
        </a-form-model-item>

        <a-form-model-item label="社会消费品零售总额" prop="retailAmount">
          <a-input
            v-model="form.retailAmount"
            placeholder="请输入社会消费品零售总额"
            addon-after="亿元" />
        </a-form-model-item>

        <a-form-model-item label="社会消费品零售排名" prop="retailAmountRanking">
          <a-input
            v-model="form.retailAmountRanking"
            placeholder="请输入社会消费品零售排名"
            addon-before="第"
            addon-after="名" />
        </a-form-model-item>

        <a-form-model-item label="消费评估" prop="consumerEvaluation">
          <a-input
            v-model="form.consumerEvaluation"
            placeholder="请输入消费评估" />
        </a-form-model-item>

        <a-form-model-item label="消费活跃度" prop="consumerActive">
          <a-input
            v-model="form.consumerActive"
            placeholder="消费活跃度"
            addon-after="分" />
        </a-form-model-item>

        <a-form-model-item label="消费活跃度排名" prop="consumerActiveRanking">
          <a-input
            v-model="form.consumerActiveRanking"
            placeholder="请输入消费活跃度排名"
            addon-before="第"
            addon-after="名" />
        </a-form-model-item>

        <a-form-model-item label="消费多样性" prop="consumerDiversity">
          <a-input
            v-model="form.consumerDiversity"
            placeholder="请输入消费多样性"
            addon-after="分" />
        </a-form-model-item>

        <a-form-model-item label="消费多样性排名" prop="consumerDiversityRanking">
          <a-input
            v-model="form.consumerDiversityRanking"
            placeholder="请输入消费多样性排名"
            addon-before="第"
            addon-after="名" />
        </a-form-model-item>

        <a-form-model-item label="地铁线路" prop="subway">
          <a-input
            v-model="form.subway"
            placeholder="请输入地铁线路数量"
            type="number"
          />
        </a-form-model-item>

        <a-form-model-item label="火车站" prop="train">
          <a-input
            v-model="form.train"
            placeholder="请输入火车站数量"
            type="number"
          />
        </a-form-model-item>

        <a-form-model-item label="机场" prop="airport">
          <a-input
            v-model="form.airport"
            placeholder="请输入机场数量"
            type="number" />
        </a-form-model-item>

        <a-form-model-item label="高铁可直达城市数" prop="trainDirect">
          <a-input
            v-model="form.trainDirect"
            placeholder="请输入高铁可直达城市数"
            type="number" />
        </a-form-model-item>

        <a-form-model-item label="高铁城际往来班次联系度" prop="trainShift">
          <a-input
            v-model="form.trainShift"
            placeholder="请输入高铁城际往来班次联系度"
            type="number" />
        </a-form-model-item>

        <a-form-model-item label="公路3小时可直达城市数" prop="highwayDirect">
          <a-input
            v-model="form.highwayDirect"
            placeholder="请输入公路3小时可直达城市数"
            type="number" />
        </a-form-model-item>

        <a-form-model-item label="国内旅游者" prop="domesticTourism">
          <a-input
            v-model="form.domesticTourism"
            placeholder="请输入国内旅游者数量"
            type="number"
            addon-after="人"
          />
        </a-form-model-item>

        <a-form-model-item label="入境旅游者" prop="entryTourism">
          <a-input
            v-model="form.entryTourism"
            placeholder="请输入入境旅游者数量"
            type="number"
            addon-after="人"
          />
        </a-form-model-item>

        <a-form-model-item label="城市标签" prop="cityTag">
          <a-input
            type="textarea"
            v-model="form.cityTag"
            placeholder="请输入城市标签（多个标签用逗号分割）" />
        </a-form-model-item>

        <a-form-model-item label="旅游人次总和排名" prop="tourismRanking">
          <a-input
            v-model="form.tourismRanking"
            addon-before="第"
            addon-after="名"
            placeholder="请输入旅游人次总和排名"
            type="number" />
        </a-form-model-item>

        <a-form-model-item label="经济规模指数" prop="economicIndicators">
          <a-input
            v-model="form.economicIndicators"
            placeholder="请输入经济规模指数"
            type="number"
            addon-after="分"
          />
        </a-form-model-item>

        <a-form-model-item label="交通便利指数" prop="trafficIndicators">
          <a-input
            v-model="form.trafficIndicators"
            placeholder="请输入人口规模指数"
            type="number"
            addon-after="分"
          />
        </a-form-model-item>

        <a-form-model-item label="商业集聚指数" prop="businessIndicators">
          <a-input
            v-model="form.businessIndicators"
            placeholder="请输入商业集聚指数"
            type="number"
            addon-after="分"
          />
        </a-form-model-item>

        <a-form-model-item label="人口规模指数" prop="populationIndicators">
          <a-input
            v-model="form.populationIndicators"
            placeholder="请输入人口规模指数"
            type="number"
            addon-after="分"
          />
        </a-form-model-item>

        <a-form-model-item label="消费活跃指数" prop="consumerIndicators">
          <a-input
            v-model="form.consumerIndicators"
            placeholder="请输入消费活跃指数"
            type="number"
            addon-after="分"
          />
        </a-form-model-item>
      </a-form-model>
    </div>

    <div class="bottom-control my-ant-drawer-footer">
      <a-space>
        <a-button type="primary" @click="submitForm">
          保存
        </a-button>
        <a-button type="dashed" @click="cancel">
          取消
        </a-button>
      </a-space>
    </div>
  </a-drawer>
</template>

<script>
import FooterToolBar from '@/components/FooterToolbar'
import { getCity, addCity, updateCity } from '@/api/platform/city'

export default {
  name: 'CreateForm',
  props: {
    cityLevelOptions: {
      type: Array,
      required: true
    },
    linesLevelOptions: {
      type: Array,
      required: true
    }
  },
  components: {
    FooterToolBar
  },
  data () {
    return {
      loading: false,
      id: undefined,
      formTitle: '',
      // 表单参数
      form: {
        cityId: undefined,
        userId: undefined,
        deptId: undefined,
        cityName: undefined,
        cityLevel: undefined,
        linesLevel: undefined,
        totalResidentPopulation: undefined,
        totalResidentPopulationRanking: undefined,
        newResidentPopulation: undefined,
        totalRegisteredPopulation: undefined,
        totalRegisteredPopulationRanking: undefined,
        familyNumber: undefined,
        cityArea: undefined,
        cityAreaRanking: undefined,
        cityGdp: undefined,
        cityGdpRanking: undefined,
        cityGdpRate: undefined,
        consumerEvaluation: undefined,
        peopleAreGdp: undefined,
        peopleAreGdpRanking: undefined,
        peopleAreConsumer: undefined,
        peopleAreConsumerRanking: undefined,
        peopleAreDominant: undefined,
        peopleAreDominantRanking: undefined,
        peopleAreWage: undefined,
        peopleAreWageRanking: undefined,
        retailAmount: undefined,
        retailAmountRanking: undefined,
        consumerActive: undefined,
        consumerActiveRanking: undefined,
        consumerDiversity: undefined,
        consumerDiversityRanking: undefined,
        subway: undefined,
        train: undefined,
        airport: undefined,
        trainDirect: undefined,
        trainShift: undefined,
        highwayDirect: undefined,
        cityTag: undefined,
        domesticTourism: undefined,
        entryTourism: undefined,
        tourismRanking: undefined,
        economicIndicators: undefined,
        consumerIndicators: undefined,
        populationIndicators: undefined,
        businessIndicators: undefined,
        trafficIndicators: undefined,
        dataTime: undefined,
        remark: undefined
      },
      open: false,
      rules: {
        cityName: [{ required: true, message: '城市名称不能为空', trigger: 'change' }, { max: 20, message: '城市名称不能超过20个字符' }],
        cityLevel: [{ required: true, message: '城市级别不能为空', trigger: 'change' }],
        linesLevel: [{ required: true, message: '城市线级不能为空', trigger: 'change' }],
        totalResidentPopulation: [{ required: true, message: '常住人口总数不能为空', trigger: 'change' }],
        totalResidentPopulationRanking: [{ required: true, message: '常住人口排名不能为空', trigger: 'change' }],
        newResidentPopulation: [{ required: true, message: '新增人口总数不能为空', trigger: 'change' }],
        totalRegisteredPopulation: [{ required: true, message: '户籍人口总数不能为空', trigger: 'change' }],
        totalRegisteredPopulationRanking: [{ required: true, message: '户籍人口排名不能为空', trigger: 'change' }],
        familyNumber: [{ required: true, message: '家庭户数不能为空', trigger: 'change' }],
        cityArea: [{ required: true, message: '城市面积不能为空', trigger: 'change' }],
        cityAreaRanking: [{ required: true, message: '城市面积排名不能为空', trigger: 'change' }],
        cityGdp: [{ required: true, message: '城市GDP不能为空', trigger: 'change' }],
        cityGdpRanking: [{ required: true, message: '城市GDP排名不能为空', trigger: 'change' }],
        cityGdpRate: [{ required: true, message: '城市GDP增速不能为空', trigger: 'change' }],
        consumerEvaluation: [{ required: true, message: '消费评估不能为空', trigger: 'change' }],
        peopleAreGdp: [{ required: true, message: '人均GDP不能为空', trigger: 'change' }],
        peopleAreGdpRanking: [{ required: true, message: '人均GDP排名不能为空', trigger: 'change' }],
        peopleAreConsumer: [{ required: true, message: '人均消费支出不能为空', trigger: 'change' }],
        peopleAreConsumerRanking: [{ required: true, message: '人均消费支出排名不能为空', trigger: 'change' }],
        peopleAreDominant: [{ required: true, message: '人均可支配收入不能为空', trigger: 'change' }],
        peopleAreDominantRanking: [{ required: true, message: '人均可支配收入排名不能为空', trigger: 'change' }],
        peopleAreWage: [{ required: true, message: '人均月薪资不能为空', trigger: 'change' }],
        peopleAreWageRanking: [{ required: true, message: '人均月薪资排名不能为空', trigger: 'change' }],
        retailAmount: [{ required: true, message: '社会消费品零售总额不能为空', trigger: 'change' }],
        retailAmountRanking: [{ required: true, message: '社会消费品零售排名不能为空', trigger: 'change' }],
        consumerActive: [{ required: true, message: '消费活跃度不能为空', trigger: 'change' }],
        consumerActiveRanking: [{ required: true, message: '消费活跃度排名不能为空', trigger: 'change' }],
        consumerDiversity: [{ required: true, message: '消费多样性不能为空', trigger: 'change' }],
        consumerDiversityRanking: [{ required: true, message: '消费多样性排名不能为空', trigger: 'change' }],
        train: [{ required: true, message: '火车站数量不能为空', trigger: 'change' }],
        trainShift: [{ required: true, message: '高铁城际往来班次联系度不能为空', trigger: 'change' }],
        airport: [{ required: true, message: '机场数量不能为空', trigger: 'change' }],
        highwayDirect: [{ required: true, message: '公路3小时可直达城市数不能为空', trigger: 'change' }],
        subway: [{ required: true, message: '地铁线路数量不能为空', trigger: 'change' }],
        trainDirect: [{ required: true, message: '高铁可直达城市数不能为空', trigger: 'change' }],

        cityTag: [{ required: true, message: '城市标签不能为空', trigger: 'change' }],
        entryTourism: [{ required: true, message: '入境旅游者不能为空', trigger: 'change' }],
        economicIndicators: [{ required: true, message: '经济规模指数不能为空', trigger: 'change' }],
        populationIndicators: [{ required: true, message: '人口规模指数不能为空', trigger: 'change' }],
        trafficIndicators: [{ required: true, message: '交通便利指数不能为空', trigger: 'change' }],
        domesticTourism: [{ required: true, message: '国内旅游者不能为空', trigger: 'change' }],
        tourismRanking: [{ required: true, message: '旅游人次总和排名不能为空', trigger: 'change' }],
        consumerIndicators: [{ required: true, message: '消费活跃指数不能为空', trigger: 'change' }],
        businessIndicators: [{ required: true, message: '商业集聚指数不能为空', trigger: 'change' }]
      }
    }
  },
  filters: {},
  created () {

  },
  computed: {},
  watch: {},
  mounted () {

  },
  methods: {
    // 城市级别格式化
    cityLevelFormat (val) {
      return this.selectDictLabel(this.cityLevelOptions, val)
    },
    // 城市线级格式化
    linesLevelFormat (val) {
      return this.selectDictLabel(this.linesLevelOptions, val)
    },
    // 取消按钮
    cancel () {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset () {
      this.form = {
        cityId: undefined,
        userId: undefined,
        deptId: undefined,
        cityName: undefined,
        cityLevel: undefined,
        linesLevel: undefined,
        totalResidentPopulation: undefined,
        totalResidentPopulationRanking: undefined,
        newResidentPopulation: undefined,
        totalRegisteredPopulation: undefined,
        totalRegisteredPopulationRanking: undefined,
        familyNumber: undefined,
        cityArea: undefined,
        cityAreaRanking: undefined,
        cityGdp: undefined,
        cityGdpRanking: undefined,
        cityGdpRate: undefined,
        consumerEvaluation: undefined,
        peopleAreGdp: undefined,
        peopleAreGdpRanking: undefined,
        peopleAreConsumer: undefined,
        peopleAreConsumerRanking: undefined,
        peopleAreDominant: undefined,
        peopleAreDominantRanking: undefined,
        peopleAreWage: undefined,
        peopleAreWageRanking: undefined,
        retailAmount: undefined,
        retailAmountRanking: undefined,
        consumerActive: undefined,
        consumerActiveRanking: undefined,
        consumerDiversity: undefined,
        consumerDiversityRanking: undefined,
        subway: undefined,
        train: undefined,
        airport: undefined,
        trainDirect: undefined,
        trainShift: undefined,
        highwayDirect: undefined,
        cityTag: undefined,
        domesticTourism: undefined,
        entryTourism: undefined,
        tourismRanking: undefined,
        economicIndicators: undefined,
        consumerIndicators: undefined,
        populationIndicators: undefined,
        businessIndicators: undefined,
        trafficIndicators: undefined,
        dataTime: undefined,
        remark: undefined
      }
    },
    /** 新增按钮操作 */
    handleAdd () {
      this.reset()
      this.open = true
      this.formTitle = '添加城市'
    },
    /** 修改按钮操作 */
    handleUpdate (row, ids) {
      this.reset()
      const cityId = row ? row.cityId : ids
      getCity(cityId).then(response => {
        this.form = response.data
        this.open = true
        this.formTitle = '修改城市'
      })
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.form.cityId !== undefined && this.form.cityId !== null) {
            updateCity(this.form).then(response => {
              this.$message.success(
                '修改成功',
                3
              )
              this.open = false
              this.$emit('ok')
            })
          } else {
            addCity(this.form).then(response => {
              this.$message.success(
                '新增成功',
                3
              )
              this.open = false
              this.$emit('ok')
            })
          }
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style scoped>
  .my-ant-drawer-content {
    padding-bottom: 50px;
  }
  .my-ant-drawer-footer {
    position: relative;
    padding: 16px 24px;
    color: rgba(0, 0, 0, 0.65);
    background: #fff;
    border-bottom: 1px solid #e8e8e8;
    border-radius: 2px 2px 0 0;
  }
</style>
